import {useMount, useRequest} from 'ahooks';

import React from 'react';
import ProTable from '@ant-design/pro-table';
import {findByRedisList, redisClear} from '@/services/ant-design-pro/sys_redis';
import {Button} from "antd";
import {DeleteOutlined, PlusOutlined} from "@ant-design/icons";

const cloneTbale = () => {
  const column = [
    {
      title: '编号',
      dataIndex: 'index',
      key: 'index',
      valueType: 'indexBorder',
    },
    {
      title: '参数键名',
      dataIndex: 'key',
      width: 'md',
    },
    {
      title: 'DB',
      dataIndex: 'db',
      width: 'md',
    },

    {
      title: ' 系统内置',
      dataIndex: 'size',

      width: 'md',
    },
  ];

  const {
    run: fetchByDataList,
    refresh,
    data: dataList,
    loading,
  } = useRequest ( findByRedisList, {
    debounceWait: 100,
    manual: true,
  } );

  useMount ( async () => {
    fetchByDataList ();
  } );

  return (
    <div>
      <ProTable<API.Attribute>
       headerTitle={"IP:"+dataList?.data?.ip+" Port:"+dataList?.data?.port+" Count:"+dataList?.data?.count}
        search={false}
        onDataSourceChange={(d) => {
          console.log ( 'onDataSourceChange', d );
        }}
        onLoad={(d) => {
          // 数据加载完操作
          console.log ( 'onDataSourceChange', d );
        }}
        dataSource={dataList?.data?.list}
        loading={loading}
        columns={column}
       toolBarRender={() => [
         <Button
           onClick={() => {
             redisClear().then ( () =>{
               refresh()
             })
           }}
           key="button"
           icon={<DeleteOutlined />}
           type="primary"
           danger
         >
           全部清理
         </Button>,
       ]}
      ></ProTable>
    </div>
  );
};

export default cloneTbale;
